<template>
  <div class="main">
    <div class="main-children top-nav">
      <div class="top-nav-top">
        <div
          class="btn btn-text-center btn-active"
          style="margin-left: 23px"
          @click="goBack"
        >
          <span
            class="el-icon-arrow-left"
            style="font-size: 20px; margin-left: -35px"
          ></span>
          <span>{{ $t("common.back") }}</span>
        </div>
      </div>
      <div
        class="shopping-icon"
        :class="{ 'shopping-icon-blue': isC }"
        @click="onChangeMenu()"
        style="cursor: pointer"
      >
        <img
          class="dream-icon"
          v-show="isA"
          src="../../assets/images/ico_nav_cart_ON.png"
          @dragstart="imgdragstart"
        />
        <img
          class="dream-icon"
          v-show="isB"
          src="../../assets/images/ico_nav_cart_OFF.png"
          @dragstart="imgdragstart"
        />
        <span class="icon-mid-text">{{ $t("common.shopcart") }}</span>
        <div class="flat" v-if="cartCount > 0">
          <span class="flat-text"> {{ cartCount }}</span>
        </div>
      </div>
    </div>
    <div
      class="price-bg"
      style="background-color: #eff3f5; height: 50px; align-items: center"
    ></div>
    <div class="main-children">
      <div v-if="resourceList && resourceList.list">
        <div>
          <div class="region-icon">
            <div
              class="region-icon-overflow"
              style="display: flex; flex-wrap: wrap"
            >
              <div style="width: 0px; margin: 10px">
                <el-checkbox
                  type="checkbox"
                  name="ckAll"
                  v-model="ckAll1"
                  @change="checkAll()"
                >
                  全选
                </el-checkbox>
              </div>
              <el-empty
                v-if="resourceList1.length == 0"
                description="您还没有添加任何资源~"
              ></el-empty>
              <div
                style="padding-top: 20px"
                v-for="(item, index) in resourceList1"
                :key="index"
              >
                <div class="region-subnode-icon" style="margin-left: 22px">
                  <input
                    type="checkbox"
                    class="inputCheck"
                    :model="item.id"
                    name="ck"
                    :key="item.id"
                    @change="check(item, index)"
                  />
                  <img
                    class="region-subnode-icon-mid"
                    :src="item.resourceIcon"
                    @dragstart="imgdragstart"
                  />
                  <div
                    class="intruduce-icon"
                    style="
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                  >
                    <span class="intruduce-text" :title="item.resourceName">{{
                      item.resourceName
                    }}</span>
                  </div>
                  <div class="intruduce-icon" style="height: 23px">
                    <span class="intruduce-text-tw">{{
                      $t("shoppingCartOrder.basePrice")
                    }}</span>
                    <span class="intruduce-text-price" style="color: red"
                      >{{ $t("priceIcon") }}{{ item.resourcePrice }}</span
                    >
                  </div>
                  <div class="intruduce-icon" style="height: 23px">
                    <span class="intruduce-text-tw">{{
                      $t("shoppingCartOrder.buyNum")
                    }}</span>
                    <span class="intruduce-text-price"
                      >x&ensp;{{ item.resourceNums }}</span
                    >
                  </div>
                  <div
                    class="intruduce-icon"
                    style="height: 23px; margin-top: 25px"
                  >
                    <span class="intruduce-text-tw" style="font-weight: bold">{{
                      $t("shoppingCartOrder.total")
                    }}</span>
                    <span class="intruduce-text-price" style="color: red"
                      >{{ $t("priceIcon") }}
                      <!-- {{ item.resourceTotalPrice }} -->
                      {{ item.resourcePrice * item.resourceNums }}
                    </span>
                  </div>
                  <div class="last-border"></div>
                  <div class="intruduce-last-bg">
                    <div
                      style="
                        width: 50%;
                        height: 25px;
                        align-items: center;
                        display: flex;
                      "
                    >
                      <img
                        style="width: 25px; height: 25px"
                        :src="onShowRightIcom(item.resourceType)"
                        @dragstart="imgdragstart"
                      />
                    </div>
                    <img
                      class="intruduce-last-icon"
                      style="cursor: pointer"
                      @click="onDeleteResource(item)"
                      src="../../assets/images/icon_delete.png"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="border-mian"></div>
            <div class="price-bg" style="margin-top: 9px">
              <div class="price-bg-text"></div>
              <div class="price-bg-text-two">
                {{ $t("totalPrice") }}：
                <span style="color: red"
                  >{{ $t("priceIcon") }}{{ totalPrice }}</span
                >
              </div>
            </div>
          </div>
          <div class="price-bg-el">
            <div
              class="basic-specifications-box-fr"
              :class="[culture === 'zh-cn' ? '' : 'pay-box-active']"
            ></div>
            <div
              class="basic-specifications-box"
              @click="basicsettlement(1)"
              :class="[culture === 'zh-cn' ? '' : 'pay-box-active']"
            >
              {{ $t("shoppingCartOrder.payBase") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <CustomSlot
      :totalPrice="totalPrice"
      :myCommonData="myCommonData"
      :parent-method="handleCurrentChange"
    ></CustomSlot>
  </div>
</template>


<script>
var cks = document.getElementsByName("ck");
var ckAll = document.getElementsByName("ckAll");

import api from "../../common/api";
import ajax from "../../common/ajax";
import util from "../../common/util";
import encryption from "../../common/encryption";
import CustomSlot from "../../components/custom/CustomSlot";
import bus from "../../assets/eventBus";
import Difference from "../../components/custom/Difference";

let userId;
let language;
let shoppingId;
export default {
  components: {
    CustomSlot,
  },
  name: "Shopping",
  /**
   * isA// 展示购物车蓝色icon
   * isB// 展示购物车灰色icon
   * picA// 展示订单灰色icon
   * picB// 展示订单蓝色icon
   * isC// 购物车触发样式
   * isD// 订单触发样式
   * orderA// 展示订单列表
   * orderB// 展示购物订单列表
   * offer//  订单提交成功状态
   * light// 订单操作详情
   */
  data() {
    return {
      count: 0,
      mydata: [],
      carItems: [],
      resourceList: null,
      resourceelement: null,
      totalPrice: 0,
      page2: 1,
      page5: 1,
      pageSize: 5,
      commonsTotal: 0,
      Totalcommons: 0,
      a: [],
      b: [],
      total: 0,
      seen: false,
      isA: true,
      isB: false,
      picA: true,
      picB: false,
      isC: false,
      isD: true,
      orderA: false,
      offer: false,
      light: false,
      basic: true,
      selectedType: 1,
      culture: "",
      list: [],
      ckAll1: false,
      myCommonData: [],
    };
  },
  created() {
    this.id = this.$route.query.id;
    userId = this.$route.query.userId;
    language = this.$route.query.culture;
    shoppingId = this.$route.query.shoppingId;
    console.log(this.$route.query);
    this.culture = this.$route.query.culture;
    this.$store.dispatch("cartShop/saveData", userId);
    getCartItemscartlist(this, this.page2);
  },
  computed: {
    cartCount() {
      return this.$store.state.cartShop.count;
    },
  },
  methods: {
    checkAll() {
      for (var i = 0; i < cks.length; i++) {
        cks[i].checked = this.ckAll1;
        this.myCommonData = this.resourceList1;
        this.a = this.resourceList1.map((item) => item.resourceTotalPrice);
        this.totalPrice = this.a.reduce((a, b) => {
          return a + b;
        });
      }
      if (this.ckAll1 == false) {
        this.myCommonData = [];
        this.totalPrice = 0;
      }
    },
    unique(newarr) {
      const res = new Map();
      return this.myCommonData.filter(
        (item) => !res.has(item.id) && res.set(item.id, 1)
      );
    },
    check(item, index) {
      console.log(item);
      if (cks[index].checked == true) {
        this.totalPrice += item.resourceTotalPrice;
        this.myCommonData = this.myCommonData.concat([item]);
        console.log(this.myCommonData);
      } else {
        let a = this.resourceList1[index].id;
        this.totalPrice -= item.resourceTotalPrice;
        this.myCommonData = this.myCommonData.filter((o) => {
          return o.id !== a;
        });
      }
      for (var i = 0; i < cks.length; i++) {
        if (cks[i].checked == false) {
          this.ckAll1 = false;
          return;
        }
      }
      this.ckAll1 = true;
    },
    imgdragstart(e) {
      e.preventDefault();
    },
    onShowRightIcom(type) {
      return util.returnResListTypeIcon(type);
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    goBack: function () {
      history.go(-1);
    },
    basicsettlement(type) {
      if (this.myCommonData.length == 0) {
        this.$message({ type: "warning", message: "请选择要结算的资源" });
        return;
      }
      bus.$emit("showCustomSlot", type);
      this.offer = true;
    },
    onChangeMenu() {
      this.isA = true;
      this.isB = false;
      this.picA = true;
      this.picB = false;
      this.isC = false;
      this.isD = true;
      this.orderA = false;
    },
    handleCurrentChange(val) {
      getCartItemscartlist(this, val);
    },
    onDeleteResource(item) {
      deletecart(this, item);
    },
  },
};
//获取购物车列表 组件一
function getCartItemscartlist(that, page2) {
  ajax.get({
    url: api.resource.privateRouteName + api.resource.children.shoppingList,
    data: {
      userId: userId,
    },
    success: function (res) {
      that.resourceList = JSON.parse(encryption.decryptionMxr(res));
      that.resourceList1 = JSON.parse(encryption.decryptionMxr(res)).list;
    },
  });
}

//删除购物车资源 组件一
function deletecart(that, item) {
  ajax.get({
    url: api.resource.privateRouteName + api.resource.children.shoppingDel,
    data: {
      id: item.id,
    },
    success: function (res) {
      getCartItemscartlist(that, 1);
      that.$store.dispatch("cartShop/saveData", userId);
    },
  });
}
</script>

<style scoped>
.main {
  width: 100%;
  background: #eff3f5;
  overflow: auto;
  padding-bottom: 20px;
}

.main-children {
  width: 95%;
  margin: 0px auto;
  background: #fff;
  position: relative;
}

.top-nav {
  height: 70px;
  margin-top: 21px;
  display: flex;
  align-items: center;
}

.top-nav-top {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.btn {
  width: 210px;
  height: 46px;
  background: #bcbcbc;
  border-radius: 4px;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
}

.btn-active {
  color: #4381e6;
  background: #ffffff;
  width: 90px;
}

.btn-text-center {
  text-align: center;
  line-height: 46px;
}

.icon-mid-text {
  font-size: 28px;
  letter-spacing: -0.09px;
  margin-left: 14px;
  text-align: center;
  font-weight: bold;
}

.dream-icon {
  width: 26px;
  height: 26px;
}

.classifies-left {
  display: flex;
  align-items: center;
}

.icon-mid {
  width: 100%;
  margin: 0 auto 0;
  font-weight: bold;
  display: flex;
  line-height: 80px;
  height: 80px;
  font-size: 20px;
  align-items: center;
  background-color: #f7f7fa;
  justify-content: space-between;
}

.shopping-icon {
  max-width: 260px;
  min-width: 140px;
  position: relative;
  margin-top: 5px;
  border-bottom: 4px solid #3a8cff;
  color: #3a8cff;
  margin-right: 47px;
}

.region-icon {
  width: 100%;
  overflow: auto;
  margin: 0 auto 0;
  background-color: #ffffff;
  border-radius: 10px 0 10px 10px;
}

.region-icon-overflow {
  width: 100%;
  overflow: auto;
}

.dream-icon {
  width: 26px;
  height: 26px;
}

.region-subnode-icon {
  width: 285px;
  height: 440px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  margin-top: 19px;
}

.region-subnode-icon-max {
  width: 285px;
  height: 560px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  margin-top: 19px;
  display: block;
}

.region-subnode-icon-mid {
  width: 283px;
  height: 220px;
  background: #cccccc;
  border: 1px solid #ffffff;
}

.border-mian {
  border: 1px solid #b5b5b5;
  width: 98%;
  margin: 45px auto 0;
  display: flex;
}

.price-bg {
  width: 95%;
  height: 100px;
  display: flex;
  margin: 0 auto;
  line-height: 100px;
  justify-content: space-between;
}

.price-bg-el {
  width: 100%;
  height: 100px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  background-color: #eff3f5;
  align-items: center;
}

.price-bg-text {
  margin-left: 22px;
  font-size: 16px;
  color: #999999;
  letter-spacing: -0.05px;
}

.price-bg-text-two {
  font-size: 25px;
  color: black;
  letter-spacing: -0.08px;
  margin-right: 22px;
  font-weight: bold;
}

.basic-specifications-box {
  background: #007aff;
  border-radius: 4px;
  width: 225px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  color: #ffffff;
}

.basic-specifications-box-fr {
  width: 220px;
  height: 60px;
}

.basic-specifications-text {
  border-radius: 4px;
  margin-right: 22px;
  text-align: center;
  line-height: 100px;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}

.last-border {
  border-top: 1px solid #cccccc;
  width: 100%;
  height: 1px;
  margin: 10px auto;
}

.last-border-ustomized {
  border: 0.5px solid #cccccc;
  width: 100%;
  height: 1px;
  margin-top: 10px;
}

.flat {
  position: absolute;
  width: 25px;
  height: 25px;
  background: #ff3b30;
  border: 1px solid red;
  border-radius: 50px;
  right: -20px;
  top: -10px;
  z-index: 102;
  display: block;
  line-height: 25px;
  text-align: center;
}

.flat-text {
  font-size: 14px;
  color: #ffffff;
  letter-spacing: -0.08px;
  text-align: center;
}

.intruduce-text {
  font-size: 16px;
  color: #4a4a4a;
  font-weight: bold;
}

.intruduce-text-tw {
  font-size: 13px;
  color: #9b9b9b;
  letter-spacing: -0.28px;
  line-height: 23px;
  text-align: left;
  margin-top: 10px;
}

.intruduce-text-price {
  font-size: 13px;
  color: red;
  letter-spacing: -0.28px;
  line-height: 23px;
  float: right;
}

.intruduce-icon {
  width: 90%;
  text-align: left;
  margin: 15px auto 0;
  text-align: left;
}

.intruduce-icon-ustomized {
  width: 90%;
  text-align: left;
  margin: 10px auto 0;
  text-align: left;
}

.intruduce-last-bg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 25px;
  margin: 10px auto 0;
}

.intruduce-last-icon {
  width: 12.9px;
  height: 17px;
}

.pay-box-active {
  width: 445px;
}
</style>
<style>
.el-empty__description p {
  font-size: 45px;
}
.el-empty {
  margin: 0 auto;
}
.el-checkbox__inner {
  width: 17px;
  height: 17px;
}
.inputCheck {
  width: 18px;
  height: 18px;
  margin-left: 267px;
  position: absolute;
}
</style>
